<template>
  <div id="datepicker">
    <h2>datepicker</h2>
    <hr>
    <el-row>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
      </div>
    </el-row>
    <hr>
    <el-row>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value15" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"></el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷键选项</span>
        <el-date-picker v-model="value15" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions3"></el-date-picker>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() >= Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      value1: '',
      value2: '',
      pickerOptions3: {
        shortcuts: [
          {
            text: '本月',
            onClick (picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          }, {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value15: '',
      value16: ''
    }
  }
}
</script>
